import React, { Component } from 'react'
import ItemTodo from './ItemTodo'

export default class ListTodo extends Component {
  handleChange = (e) => {
    this.props.editAllTodo(e.target.checked)
  }

  render() {
    const { list, editTodo, handleDel, active } = this.props

    let newList = null

    if (active === 'all') {
      newList = list
    } else if (active === 'active') {
      newList = list.filter((item) => !item.done)
    } else {
      newList = list.filter((item) => item.done)
    }

    return (
      <section className="main">
        {list.length ? (
          <>
            <input
              checked={list.every((item) => item.done)}
              id="toggle-all"
              className="toggle-all"
              type="checkbox"
              onChange={this.handleChange}
            />
            <label htmlFor="toggle-all">Mark all as complete</label>
          </>
        ) : null}
        <ul className="todo-list">
          {newList.map((item) => (
            <ItemTodo
              item={item}
              key={item.id}
              editTodo={editTodo}
              handleDel={handleDel}
            />
          ))}
        </ul>
      </section>
    )
  }
}
